﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example19.aspx.cs" Inherits="Chapter35.Example19" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 35-19 用 canvas 显示视频并在上面绘图</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        canvas {
            border: thin solid black;
        }

        body > * {
            float: left;
        }
    </style>
</head>
<body>
    <video id="timessquare" hidden="hidden" controls="controls" preload="auto" autoplay="autoplay" width="360" height="240">
        <source src="timessquare.mp4" type="video/mp4" />
        <source src="timessquare.webm" type="video/webm" />
        <source src="timessquare.ogv" type="video/ogg" />
        Video cannot be displayed
    </video>
    <canvas id="canvas" width="360" height="240">Your browser doesn't support the <code>canvas</code> element.</canvas>
    <script>
        var ctx = document.getElementById('canvas').getContext('2d');
        var video = document.getElementById('video');
        var width = 100;
        var height = 10;
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'red';

        setInterval(function () {
            ctx.drawImage(video, 0, 0, 360, 240);
            ctx.strokeRect(180 - (width / 2), 120 - (height / 2), width, height);
        }, 25);

        setInterval(function () {
            width = (width + 1) % 200;
            height = (height + 3) % 200;
        }, 100);
    </script>
</body>
</html>
